<template>
  <div class="pointsDetails">
    <el-card>
      <el-button type="primary" @click="dialogVisible = true" style="margin-bottom:20px">积分调整</el-button>
      <avue-crud
        ref="crud"
        style="width:100%"
        :data="loadData"
        :option="tableOption"
        :table-loading="loading"
      ></avue-crud>
    </el-card>
    <template>
      <div style="width:100%;position:relative;height:100px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
    <el-dialog title="积分调整" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-row :gutter="10" class="row">
          <el-col :xs="24" :sm="24">
            <el-form-item label="积分变化类型：" prop="personName">
              <el-select v-model="ruleForm.personName" placeholder="请选择积分变化类型" style="width:100%">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in bhlxList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="调整原因：" prop="operationReason">
              <el-input v-model="ruleForm.operationReason" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item prop="balanceType">
              <span slot="label">
                <el-select v-model="ruleForm.balanceType" style="width:100%">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in zhengfuList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </span>
              <el-input v-model="ruleForm.operationNum" placeholder="当前积分250个"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlClose">取 消</el-button>
        <el-button type="primary" @click="handlSure" :loading="loadingSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  integralDetailedList,
  integralDetailedUpdate,
} from "@/api/shop/member/list.js";
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      loading: false,
      loadingSure: false,
      page: {
        total: 0,
        size: 10,
        current: 1,
      },
      rules: {},
      loadData: [],
      zhengfuList: [
        {
          label: "-",
          value: "01",
        },
        {
          label: "+",
          value: "00",
        },
      ],
      bhlxList: [
        {
          label: "兑换礼品",
          value: "00",
        },
        {
          label: "积分下调",
          value: "01",
        },
        {
          label: "积分上调",
          value: "02",
        },
        {
          label: "消费送积分",
          value: "03",
        },
      ], //积分变化类型
      tableOption: {
        header: false,
        align: "center",
        editBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: "积分变化类型",
            prop: "operationType",
            dicData: [
              {
                label: "兑换礼品",
                value: "00",
              },
              {
                label: "积分下调",
                value: "01",
              },
              {
                label: "积分上调",
                value: "02",
              },
              {
                label: "消费送积分",
                value: "03",
              },
            ],
          },
          {
            label: "积分变化（个）",
            prop: "operationNum",
          },
          {
            label: "积分余额（个）",
            prop: "integralBalance",
          },
          {
            label: "操作人",
            prop: "operationId",
          },
          {
            label: "变动时间",
            prop: "updateTime",
          },
          {
            label: "调整原因",
            prop: "operationReason",
          },
        ],
      },
    };
  },
  methods: {
    getList() {
      integralDetailedList(
        Object.assign({ personId: this.$route.query.personId }, this.page)
      ).then((val) => {
        let data = val.data.data;
        this.page = {
          total: data.total,
          size: data.size,
          current: data.current,
        };
        this.loadData = data.records;
        console.log(this.loadData);
      });
    },
    handlClose() {
      this.dialogVisible = false;
      this.$refs["ruleForm"].resetFields();
    },
    handlSure() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          integralDetailedUpdate(
            Object.assign(
              { personId: this.$route.query.personId },
              this.ruleForm
            )
          ).then(() => {
            this.handlClose();
            this.getList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sizeChange(size) {
      this.page.size = size;
      this.getList();
    },
    currentChange(current) {
      this.page.current = current;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.pointsDetails {
  .row {
    margin: 30px 0px;
  }
  .bg {
    width: 202px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background-color: rgba(242, 242, 242, 1);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.647058823529412);
  }
}
</style>